<template>
	<div>
		<div class="favorite" v-if="$route.query.favorite != 1">			
			<img src="static/images/png/collection2.png" @click="collection(false)" v-if="favoriteState.carFavoriteId" width="40" height="40" />
			<img src="static/images/png/collection1.png" @click="collection(true)" v-else width="40" height="40" />
		</div>
		<div class="gotop" @click="gotop">
			<img src="static/images/png/to_top.png" width="50" height="50" />
		</div>	
  
  <div class="page has-navbar has-tabbar" v-nav="{title: '车辆详情', showBackButton: true ,onBackButtonClick: onBackButtonClick ,showMenuButton: true, menuButtonText: '联系商家', onMenuButtonClick: onMenuButtonClick}">
    <div class="page-content padding-top">
      <!-- <p class="text-center">这里是车辆详情{{$route.params.id}}</p> -->
      <div v-show="tabIndex == 0">
      <swiper ref="swiper" 
        direction="horizontal" 
        width="100%" 
        pager-color="#ea5a49" 
        pager-bg-color="#e5e4e3"
        hide-pager="false"
      style="height:75vw;" v-if="res.carImages">
        <swiper-item v-for="carImg in res.carImages" v-if="carImg.imageKey != 'vin'">
          <div v-bind:style="{backgroundImage:'url('+imgUrl + carImg.imageUrl+'.r_1200xh_900)'}" ><span class="img-tips">{{carImg.imageKey | filterImageName}}</span></div>
        </swiper-item>
      </swiper>
      <div class="basic-state" v-if="res.carOrderState==1"><aside><span :data-state="res.carOrderState">已预定</span></aside></div>
      <div class="basic">
        <div class="system-name ng-binding">{{res.carTitle || '暂无'}}</div>
        <div class="name ng-binding">宣传标题：{{res.carTitle || '暂无'}}</div>
        <div class="group" v-if="res.carRetailPrice && res.carRetailPrice > 0">
          <div class="price-unit ng-binding" >¥</div>
          <div class="price ng-binding">{{res.carRetailPrice}}万</div>
        </div>
        <div class="group" v-else="res.carRetailPrice && res.carRetailPrice > 0">
          <div class="price ng-binding">面议</div>
        </div>
        <div class="text"><span v-if="res.carLicenceState == 1">{{res.carLicenceDate | filterDateForYear}}</span><span v-if="res.carLicenceState == 2">未上牌</span><span v-if="res.carLicenceState == 3">新车</span>｜{{res.carMileage || '0'}}万公里 <br>
        <!-- {{res.carStockState | filterCarStockState}} -->
        {{res.carTransferState | filterCarTransferState}} | {{res.carFixedPriceState | filterCarFixedPriceState}}
        </div>
        <!-- <div class="text qiyuan-verified">车架号：{{res.carVin}}<img src="static/images/qiyuan_verified.svg" v-if="res.carAuthState == '1'"></div> -->
        <!--<div class="text">联系方式：<a :href="'tel:'+(res.user.userMobile || '')+''" style="color:#000;margin-right:10px;" class="ng-binding">{{res.user.userMobile || ''}}</a>{{res.user.userName || ''}}</div>
        <div class="text">库龄：{{res.stockAgeRemark || "-/天"}}</div>-->
        <!--<div class="text">
        	<i v-if="res.carTransferState">不含过户费</i>
        	<i v-else>含过户费</i>
        	|
        	<i v-if="res.carFixedPriceState">不是一口价</i>
        	<i v-else>一口价</i>
        </div>-->
        <div class="car-finance-service">
							<aside>
								<span v-if="res.carFinanceService==1">金融服务</span>
								<span v-if="res.carExtendedWarranty==1" style="background: #ECBE60;">延保服务</span>
								<span v-if="res.carAuthState==10" style="background: none;">
									<img src="static/images/png/mark.png" width="75" height="20" alt="" />
								</span>
							</aside>
						</div>
      </div>
      <div style="padding:15px 0;" v-if="res.carRadarInfo">
        <div class="echarts">
        	<p style="text-align: center; font-size: 12px; color: #999;">橘色面积越大越值得购买</p>
          <div ref="echartscarRadarList" style=" height: 240px"></div>
        </div>
      </div>
<!--       <div class="statistics-panel">
        <div class="record">
          <div class="value">0</div>
          <div class="title">同系在售</div>
        </div>
        <div class="record">
          <div class="value">0</div>
          <div class="title">同价在售</div>
        </div>
      </div> -->
<!--       <div class="header">
        <div class="section">
          <div class="orange-bar"></div>
          <div class="title">新车价</div>
        </div>
      </div>
      <div class="table-records-panel">
        <div class="table-records">
          <div class="record">
            <div class="value ng-binding">
              {{res.carGuidePrice}}万
            </div>
            <div class="title">新车指导价</div>
          </div>
          <div class="record">
            <div class="value ng-binding">
              {{res.carTaxPrice}}万
            </div>
            <div class="title">新车完税价</div>
          </div>
          <div class="record">
            <div class="value ng-binding">
              {{(res.carTaxPrice - res.carGuidePrice).toFixed(2)}}万
            </div>
            <div class="title">购置税</div>
          </div>
        </div>
      </div> -->
      <!-- <div class="header">
        <div class="section">
          <div class="orange-bar"></div>
          <div class="title">标价</div>
        </div>
      </div>
      <div class="table-records-panel">
        <div class="table-records">
          <div class="record">
            <div class="value" v-if="res.carRetailPrice && res.carRetailPrice >=0">
              {{res.carRetailPrice}}万
            </div>
            <div class="value" v-else="res.carRetailPrice && res.carRetailPrice >=0">
              面议
            </div>
            <div class="title">零售价</div>
          </div>
          <div class="record">
            <div class="value">
              {{res.carTransferState | filterCarTransferState}}
            </div>
            <div class="title">过户费</div>
          </div>
          <div class="record fixed-price">
            <div class="value">
              {{res.carFixedPriceState | filterCarFixedPriceState}}
            </div>
            <div class="title">
              一口价
            </div>
          </div>
        </div>
      </div> -->
      <div class="header">
        <div class="section">
          <div class="orange-bar"></div>
          <div class="title">车辆信息</div>
        </div>
      </div>
      <div class="table-records-panel">
        <div class="table-records">
          <div class="record">
            <div class="value">
              {{res.car4sUpkeepState | filterCar4sUpkeepState}}
            </div>
            <div class="title">4S店定期保养</div>
          </div>
          <div class="record">
            <div class="value">
              {{res.carOutColor || '-'}}
            </div>
            <div class="title">外观颜色</div>
          </div>
          <div class="record">
            <div class="value">
              {{res.carInColor || '-'}}
            </div>
            <div class="title">内饰颜色</div>
          </div>
        </div>
        <div class="table-records">
          <div class="record">
            <div class="value">
              {{res.carType.carTypeName || '-'}}
            </div>
            <div class="title">车身类型</div>
          </div>
          <div class="record">
            <div class="value">
              {{res.carDisplacement+res.carInletModel || '-'}}
            </div>
            <div class="title">排量</div>
          </div>
          <div class="record">
            <div class="value">
             {{res.carGearbox || '-'}}
            </div>
            <div class="title">变速箱</div>
          </div>
        </div>
        <div class="table-records">
          <div class="record">
            <div class="value">
              {{res.carFuel || '-'}}
            </div>
            <div class="title">燃油类型</div>
          </div>
          <div class="record">
            <div class="value">
              {{res.carEnviron || '-'}}
            </div>
            <div class="title">排放标准</div>
          </div>
          <div class="record">
            <div class="value">
              -
            </div>
            <div class="title">-</div>
          </div>
          
        </div>
        <div class="table-records">
          <div class="record">
            <div class="value">
              {{res.carForceInsuranceDate || '-' | filterDateForDayTime  }}
            </div>
            <div class="title">交强险到期</div>
          </div>
          <div class="record">
            <div class="value">
              {{res.carBusinessInsuranceDate || '-' | filterDateForDayTime}}
            </div>
            <div class="title">商业险到期</div>
          </div>
          <div class="record">
            <div class="value">
              {{res.carValidateDate || '-' | filterDateForDayTime}}
            </div>
            <div class="title">年审到期</div>
          </div>
          
        </div>
      </div>
      <div class="header">
        <div class="section">
          <div class="orange-bar"></div>
          <div class="title">车辆描述</div>
        </div>
      </div>
      <list>
        <item class="item-icon-right no-topline">检测报告<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item>
        <item style="white-space:normal;line-height:20px;padding:14px 16px;">瑕疵描述:{{res.carFlawDesc || ''}}</item>
        <item style="white-space:normal;line-height:20px;padding:14px 16px;">卖点描述:{{res.carSellingPointDesc || ''}}</item>
        <item style="white-space:normal;line-height:20px;padding:14px 16px;">按揭说明:{{res.carMortgageDesc || ''}}</item>
        <item style="white-space:normal;line-height:20px;padding:14px 16px;">补充说明:{{res.carRemark || ''}}</item>
      </list>
      
</div>
<div v-show="tabIndex == 1">
  <div class="grobal-title">{{res.carTitle}}</div>
  <div class="header">
    <div class="section">
      <div class="orange-bar"></div>
      <div class="title">基本参数</div>
    </div>
  </div>
  <list class="list-ios" style="margin-bottom:0;">
    <item>厂商<span class="item-note">{{res.model.modelManufacturer}}</span></item>
    <item>级别<span class="item-note">{{res.carType.carTypeName}}</span></item>
    <item>发动机<span class="item-note">{{res.model.modelEngineModel}}</span></item>
    <item>变速箱<span class="item-note">{{res.model.modelGearbox}}</span></item>
    <item>车身结构<span class="item-note">{{res.model.modelBodywork}}</span></item>
  </list>

  <div class="header">
    <div class="section">
      <div class="orange-bar"></div>
      <div class="title">车身</div>
    </div>
  </div>
  <list class="list-ios" style="margin-bottom:0;">
    <item>长度(mm)<span class="item-note">{{res.model.modelLength}}</span></item>
    <item>宽度(mm)<span class="item-note">{{res.model.modelWidth}}</span></item>
    <item>高度(mm)<span class="item-note">{{res.model.modelHeight}}</span></item>
    <item>轴距(mm)<span class="item-note">{{res.model.modelWheelbase}}</span></item>
    <item>车身结构<span class="item-note">{{res.model.modelBody}}</span></item>
  </list>

  <div class="header">
    <div class="section">
      <div class="orange-bar"></div>
      <div class="title">发动机</div>
    </div>
  </div>
  <list class="list-ios" style="margin-bottom:0;">
    <item>发动机型号<span class="item-note">{{res.model.modelEngineModel}}</span></item>
    <item>排量(mL)<span class="item-note">{{res.model.modelDisplacement}}</span></item>
    <item>进气形式<span class="item-note">{{res.model.modelInletModel}}</span></item>
    <item>气缸排列形式<span class="item-note">{{res.model.modelCylinderArray}}</span></item>
    <item>气缸数(个)<span class="item-note">{{res.model.modelCylinderNum}}</span></item>
    <item>燃料形式<span class="item-note">{{res.model.modelFuelRoz}}</span></item>
    <item>环保标准<span class="item-note">{{res.model.modelEnviron}}</span></item>
  </list>

  <div class="header">
    <div class="section">
      <div class="orange-bar"></div>
      <div class="title">变速箱</div>
    </div>
  </div>
  <list class="list-ios" style="margin-bottom:0;">
    <item>变速箱类型<span class="item-note">{{res.model.modelGearbox}}</span></item>
    <item>挡位个数<span class="item-note">{{res.model.modelGearNum}}</span></item>
  </list>
<div v-for="carConf in carConfig">
  <div class="header">
    <div class="section">
      <div class="orange-bar"></div>
      <div class="title">{{carConf.confName}}</div>
    </div>
  </div>
  <list class="list-ios"  style="margin-bottom:0;">
    <item v-for="childCarConfItem in carConf.childCarConf">{{childCarConfItem.confName}}<span class="item-note" v-if="childCarConfItem.selectedState">有</span><span class="item-note" v-else="childCarConfItem.selectedState">无</span></item>
  </list>
</div>









</div>




      

    </div>
    <div class="tab-bar weui-flex">
      <div class="hairline-top"></div>
      <div class="weui-flex-item tab-item" :class="{on:tabIndex == 0}" @click="tab(0)">基本信息</div>|
      <div class="weui-flex-item tab-item" :class="{on:tabIndex == 1}" @click="tab(1)">配置信息</div>
    </div>
  </div>
  </div>
</template>
<script>
let echarts = require('echarts/lib/echarts')
  export default {
    data(){
      return {
        imgUrl:imgUrl,
        res:{
          shop:{},
          user:{},
          model:{},
          carType:{},
          carRadarInfo:{},
          user:{},
        },
        carConfig:[],
        tabIndex:0,
        echartscarRadarListData: {
            legend: {
                bottom: 5,
                data: ['北京'],
                itemGap: 20,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                selectedMode: 'single'
            },
          radar: {
            indicator: [
              {
                name:'排量(10)',
                max: 6
              },
              {
                name: '车龄(15)',
                max: 15
              },
              {
                name: '里程(20)',
                max: 20
              },
              {
                name: '价格(80)',
                max: 80
              },
              {
                name: '过户(10)',
                max: 10
              }
            ],
            splitLine: {
              lineStyle: {
                color: ['rgba(255,104,22, 0.4)', 'rgba(255,104,22, 0.1)', ].reverse()
              }
            },
            shape: 'circle',
            splitNumber: 5,
            name: {
              textStyle: {
                color: '#F9713C'
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,104,22, 0.5)'
              }
            }
          },
          series: {
            name: '偏爱车辆价格',
            type: 'radar',
            data: [
              []
            ],
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#FF6816'
              }
            },
            areaStyle: {
              normal: {
                opacity: 0.1
              }
            }
          }
        },
        favoriteState:'',


      }
    },
    computed:{
      echartscarRadarList() {
        return echarts.init(this.$refs.echartscarRadarList)
      },
      userSession() {
				return sess.get('userSession')
			},
    },
    created(){
    	console.log(this.$route.params.id);
    	var _this = this;
    	this.getCollection()
  		axios.get(baseUrl+'/controller/getCarById',{params:{carId:this.$route.params.id,imageViewId:3}})
  		.then(function(res){
  			_this.res = res.data.result;
        if (_this.res.carRadarInfo) {
          _this.echart()
        }
        
        
  		});
      axios.get(baseUrl+'/controller/getCarConfById',{params:{carId:this.$route.params.id}})
      .then(function(res){
        _this.carConfig = res.data.result
      });
    },
    mounted () {
      console.log('usfcuefyedilufcjsfkef');

    },
    methods:{
      onMenuButtonClick () {
        window.location.href = "tel:" + this.res.user.userMobile
      },
      onBackButtonClick () {
        this.$store.commit('carObjStateChange',true)
        this.$router.go(-1)
      },
      tab(index){
        this.tabIndex = index;
      },
      echart(){
        this.echartscarRadarListData.series.data[0][0] = parseFloat(this.res.carRadarInfo.carDisplacement)>6?6:parseFloat(this.res.carRadarInfo.carDisplacement)||0
				this.echartscarRadarListData.series.data[0][2] = 20-(this.res.carRadarInfo.carMileage>20?20:this.res.carRadarInfo.carMileage)||0
				this.echartscarRadarListData.series.data[0][3] = this.res.carRadarInfo.carRetailPrice>80?0:80-(parseFloat(this.res.carRadarInfo.carRetailPrice)||0)
				this.echartscarRadarListData.series.data[0][4] = 10-(parseFloat(this.res.carRadarInfo.carTransferNum)>10?10:parseFloat(this.res.carRadarInfo.carTransferNum))||0
				this.echartscarRadarListData.radar.indicator[0].name = `排量(${this.res.carDisplacement||'0'}${this.res.carInletModel||''})`
        switch (~~this.res.carLicenceState) {
          case 1:
            this.echartscarRadarListData.radar.indicator[1].name = `车龄(${this.res.carRadarInfo.carAge||'0'}/年)`
            this.echartscarRadarListData.series.data[0][1] = 15-(this.res.carRadarInfo.carAge>15?15:this.res.carRadarInfo.carAge)||0
            break
          case 2:
            this.echartscarRadarListData.radar.indicator[1].name = '车龄(新车)'
            this.echartscarRadarListData.series.data[0][1] = 15
            break
          case 3:
            this.echartscarRadarListData.radar.indicator[1].name = '车龄(未上牌)'
            this.echartscarRadarListData.series.data[0][1] = 15
            break
        }
				this.echartscarRadarListData.radar.indicator[2].name = `里程(${this.res.carRadarInfo.carMileage||'0'}/万公里)`
				this.echartscarRadarListData.radar.indicator[3].name = `价格(${this.res.carRadarInfo.carRetailPrice||'0'}/万)`
				this.echartscarRadarListData.radar.indicator[4].name = `过户(${parseFloat(this.res.carRadarInfo.carTransferNum)||'0'}/次)`
				this.$nextTick().then(()=>{
					this.echartscarRadarList.setOption(this.echartscarRadarListData)
				})
      },
      getCollection(){				
				axios.get(baseUrl + '/controller/carFavorite/getCarFavorite', {
					params:{
						carId:this.$route.params.id,
						userId:this.userSession.userId
					}
				}).then(res=>{
					this.favoriteState = res.data.result
				})
			},
			collection(boo){
				if(boo){
					axios.get(baseUrl + '/controller/carFavorite/insertCarFavorite', {
						params:{
							carId:this.$route.params.id,
							userId:this.userSession.userId
						}
					}).then(res=>{
						if(res){
							setTimeout(()=>{
								this.favoriteState = res.data.result
								$toast.show('已添加至收藏车辆', 2000)
							},400)							
						}
					})
				}else{
					axios.get(baseUrl + '/controller/carFavorite/deleteCarFavorite', {
						params:{
							userId:this.userSession.userId,
							carFavoriteId:this.favoriteState.carFavoriteId
						}
					}).then(res=>{
						if(res){
							setTimeout(()=>{
								this.favoriteState = ''
								$toast.show('已取消收藏', 2000)
							},400)							
						}
					})
				}
			},
			gotop(){
				let dom = document.querySelectorAll('.page-content')				
				dom[0].scrollTop = 0
			},
    }
  }
</script>
<style scoped>
.basic {
    padding: 10px 16px 8px;
    background: #fff;
}
.basic .system-name {
    font-size: 16px;
    font-weight: 700;
}
.basic .name {
    margin-top: 2px;
    font-size: 12px;
}
.basic .group {
    margin-top: 10px;
    margin-bottom: 2px;
}
.basic .group div {
    float: left;
    height: 30px;
    line-height: 30px;
}
.basic .group .price-unit {
    font-size: 14px;
    font-weight: 700;
    color: #e55600;
}
.basic .group .price {
    font-size: 20px;
    font-weight: 700;
    color: #e55600;
}
.basic .group .view-count {
    color: #fff;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    height: 22px;
    line-height: 22px;
    background: #f09190;
    float: right;
    margin-top: 12px;
}
.basic .text {
    clear: both;
    margin-top: 8px;
    font-size: 12px;
}
.basic .qiyuan-verified img {
    width: 58px;
    height: 16px;
    float: right;
    margin-top: -1px;
}
.basic .qiyuan-verified img {
    width: 58px;
    height: 16px;
    float: right;
    margin-top: -1px;
}
.statistics-panel {
    display: flex;
    height: 60px;
    background: #fff;
    margin-top: 5px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.statistics-panel .record {
    flex: 1;
    text-align: center;
    font-size: 14px;
}
.statistics-panel .record:not(:last-child) {
    border-right: 1px solid #e6e6e6;
}
.statistics-panel .record .value {
    color: #ff6816;
    position: relative;
    top: -4px;
}
.statistics-panel .record .title {
    padding-top: 1px;
}
.header .section {
    height: 28px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    background: #f8f8f8;
    display: flex;
}
.section .orange-bar {
    width: 4px;
    height: 28px;
    background: #ff6816;
}
.section .title {
    flex: auto;
    padding: 5px 12px;
}
.table-records-panel {
    clear: both;
    background: #fff;
}
.table-records-panel .table-records {
    display: flex;
}
.table-records-panel .table-records .record {
    flex: 1;
    text-align: center;
    height: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.table-records-panel .table-records .record:not(:last-child) {
    border-right: 1px solid #e6e6e6;
}
.table-records-panel .table-records .record .value {
    font-size: 14px;
}
.table-records-panel .table-records .record .title {
    font-size: 14px;
    margin-top: 5px;
    color: #737373;
}
.table-records-panel .table-records:not(:last-child) .record {
    border-bottom: 1px solid #e6e6e6;
}
.tab-bar{
  height: 45px;
  padding: 0 0 0 0px;
  background: #fff;
  color: #999;
  position: fixed;
  bottom: 0;
  left: 0;
  line-height: 45px;
  width: 100%;
}
.tab-item{
  color: #666;
  max-width: 100%;
}
.tab-item.on{
  color: #fd6b2c;
}
.grobal-title {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    padding: 0 16px;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

</style>






























